<template>
  <div class="pingfen_page">
    <van-nav-bar
      title="快递单评价"
      left-arrow
      @click-left="onClickLeft"
      right-text="提交"
      @click-right="onClickRight"
    />
    <div class="zongti">
      <p class="total">总体评分</p>
      <div class="fenshu"><span>8</span> 分</div>
      <div class="img">
        <van-rate
          v-model="value"
          icon="smile"
          void-icon="smile-o"
          color="#ffcc33"
        />
      </div>
    </div>

    <div class="dianpu">
      <p class="title">店铺评分</p>
      <div class="box">
        <div class="left">店铺评分</div>
        <div class="right">
          <van-rate
            v-model="shop"
            icon="star"
            void-icon="star-o"
            color="#ffcf60"
          />
        </div>
      </div>

      <div class="box">
        <div class="left">物流速度</div>
        <div class="right">
          <van-rate
            v-model="speed"
            icon="star"
            void-icon="star-o"
            color="#ff8d5b"
          />
        </div>
      </div>

      <div class="box">
        <div class="left">快递评分</div>
        <div class="right">
          <van-rate
            v-model="kuaidi"
            icon="star"
            void-icon="star-o"
            color="#ff5d5e"
          />
        </div>
      </div>
    </div>

    <div class="down">
      <textarea
        name=""
        id=""
        cols="100%"
        rows="5"
        placeholder="写几句评价"
      ></textarea>

      <div class="upload">
        <div class="pic">
         <van-uploader v-model="fileList" multiple :max-count="5" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {PingjiaDetailApi,WuLiuListApi,WuliuPingjia } from "../../request/api";
export default {
  data(){
    return {
      fileList:[],
      dataArr:[],
      dataObj:{},
      commit:'',
      shop:0,
      speed:0,
      kuaidi:0,
      value:0,
      id:0
    }
  },
  methods: {
    onClickLeft() {
      this.$router.back();
    },
    submit(){
      console.log(1);
      this.$router.back();
    },
    // 点击了提交以后
    onClickRight(){
        WuliuPingjia({
          
        }).then(res=>{

        })

    }
  },
  created(){

    WuLiuListApi({
      keyword:1,
      current:1,
      size:3
    }).then(res=>{
      console.log(res);
    });

  }
};
</script>

<style lang="less">
.pingfen_page {
  width: 100vw;
  height: 100vh;
  background-color: #f5f5f5;
  overflow: hidden;
}
.van-nav-bar {
  width: 100%;
  background-color: #039;
  .van-nav-bar__left {
    color: #fff;
    font-size: 20px;
    .van-icon {
      color: #fff;
      font-size: 20px;
    }
  }
  .van-nav-bar__right {
    .van-nav-bar__text {
      color: #fff;
      font-size: 20px;
    }
  }
  .van-nav-bar__title {
    color: #fff;
    font-size: 20px;
  }
}

.zongti {
  box-sizing: border-box;
  width: 100%;
  height: 143px;

  background-color: #fff;
  padding: 0 15px;
  .total {
    height: 44px;
    line-height: 44px;
    text-align: center;
    color: #b0b0b0;
  }
  .fenshu {
    height: 51px;
    line-height: 51px;
    text-align: center;
    color: #ffcc33;
    span {
      font-size: 48px;
      font-weight: 700;
    }
  }
  .img {
    display: flex;
    justify-content: space-around;
    border-bottom: 1px solid #ddd;
    padding: 0 15px 10px;
    box-sizing: border-box;
    .van-icon {
      width: 50px !important;
      height: 50px !important;
      margin-right: 8px !important;
      font-size: 50px;
    }
  }
}

.dianpu {
  padding: 0 14px;
  box-sizing: border-box;
  width: 100%;
  height: 220px;
  background-color: #fff;
  .title {
    height: 54px;
    line-height: 54px;
    border-bottom: 1px dashed #ddd;
    padding-left: 15px;
    font-weight: 500;
  }
  .box {
    height: 54px;
    line-height: 54px;
    border-bottom: 1px dashed #ddd;
    display: flex;
    align-items: center;
    .left {
      padding-left: 30px;
      margin-right: 28px;
      font-weight: 500;
    }
    .right {
      display: flex;
      align-items: center;
      .van-icon {
        width: 30px !important;
        height: 30px !important;
        margin-right: 8px !important;
        font-size: 30px;
      }
    }
  }
}

.down {
  background-color: #fff;
}
textarea {
  padding: 15px;
  box-sizing: border-box;
  outline: none;
  border: 0;
  margin-top: 15px;
}
.upload{
   padding: 0px 15px 40px;
   .van-uploader{
     margin-right: 10px;
   }
}
// .upload {
//   background-color: #fff;
//   padding: 0px 15px 40px;
//   display: flex;
//   .pic {
//     // width: 90px;
//     // height: 90px;
//     // border: 1px solid #000;
//     // background-color: skyblue;
//     margin-right: 10px;
//     display: flex;
//     align-items: center;
//     justify-content: center;
//    .van-uploader{
//      width: 90px;
//     height: 90px;
//     display: flex;
//       img{

//       }
//    }
//   }
// }
</style>